<template>
  <view class="content pd-20">
    <view class="list-block pd-20">
      <u-grid :border="false">
        <u-grid-item :customStyle="{padding: '30rpx 0'}" @click="routeByUrl('/operationorder/Typeofoperationticket')">
          <!-- <view class="item-icon-block"> -->
            <u-icon name="file-text" size="36" color="#3F99F7"></u-icon>
          <!-- </view> -->
          <text class="item-title mt-20">创建操作票</text>
        </u-grid-item>
        <u-grid-item :customStyle="{padding: '30rpx 0'}" @click="routeByUrl('/operationorder/Operationordertask')">
          <!-- <view class="item-icon-block"> -->
            <u-icon name="list-dot" size="36" color="#3F99F7"></u-icon>
          <!-- </view> -->
          <text class="item-title mt-20">操作票任务</text>
        </u-grid-item>
       
      </u-grid>
    </view>
  </view>
</template>

<script>
  import { getWaitListApi } from '@/apis/work/index.js'
  
  export default {
    data() {
      return {
        number: 0
      }
    },
    onShow() {
      this.getWaitList()
    },
    methods: {
      getWaitList: function() {
        getWaitListApi().then(res => {
          this.number = res ? res.length : 0
        }).catch(err => console.warn(err))
      },
      routeByUrl: function(url) {
        uni.navigateTo({ url })
      }
    }
  }
</script>

<style>
  page {
    background-color: #EFEFEF;
  }
</style>

<style lang="scss" scoped>
  .content {
    .list-block {
      min-height: 327rpx;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      .item-icon-block {
        width: 120rpx;
        height: 120rpx;
        border-radius: 10rpx;
        box-shadow: 10rpx 10rpx 10rpx rgba(102, 102, 102, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        .item-icon {
          width: 66rpx;
          height: 66rpx;
        }
      }
      .item-title {
        font-size: 28rpx;
        line-height: 40rpx;
        color: #333333;
      }
    }
  }
</style>